<template>
  <div>
    <template>
      <el-table
          :data="worldDatas"
          stripe
          border
          fit
          style="width: 100%">
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="input"
                size="mini"
                @keyup.enter.native="search"
                placeholder="输入国家或地区搜索"/>
          </template>
          <el-table-column
              prop="country"
              label="国家/地区">
          </el-table-column>
          <el-table-column
              prop="latestTotalCases"
              label="累计病例">
          </el-table-column>
          <el-table-column
              prop="diffFromPrevDay"
              label="新增病例">
          </el-table-column>
        </el-table-column>
      </el-table>
    </template>

    <el-pagination
        background
        layout="prev, pager, next"
        page-size="12"
        :total="totalSize"
        @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "WorldData",
  data() {
    return {
      input: null,
      totalSize: null,
      worldDatas: null
    }
  },
  created() {
    const _this = this;
    axios.get('http://localhost:8181/COVID/groupByCountry/1/12').then(function (resp) {
      _this.worldDatas = resp.data.content
      _this.totalSize = resp.data.totalElements
    })
  },
  methods: {
    page(currentPage) {
      const _this = this;
      axios.get('http://localhost:8181/COVID/groupByCountry/' + currentPage + '/12').then(function (resp) {
        _this.worldDatas = resp.data.content
        _this.totalSize = resp.data.totalElements
      })
    },
    search() {
      const _this = this;
      if (_this.input == '') {
        axios.get('http://localhost:8181/COVID/groupByCountry/1/12').then(function (resp) {
          _this.worldDatas = resp.data.content
          _this.totalSize = resp.data.totalElements
        })
      } else {
        axios.get('http://localhost:8181/COVID/findByCountry/' + _this.input + '/1/12').then(function (resp) {
          _this.worldDatas = resp.data.content
          _this.totalSize = resp.data.totalElements
        })
      }
    }
  }
}
</script>

<style scoped>

</style>